/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react'
import { Platform, StyleSheet, Text, View, Image, Navigator } from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import NavigationBar from './js/commom/navigation-bar'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
})

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props)
    this.state = {selectedTab: 'tb_polular'}
  }

  // render() {
  //   return (
  //     <View style={styles.container}>
  //       <NavigationBar title='boys' />
  //     </View>
  //   )
  // }
  render() {
    return (
      <TabNavigator>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_polular'}
          title="最热"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('./res/images/ic_polular.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('./res/images/ic_polular.png')}/>}
          badgeText="1"
          onPress={() => this.setState({selectedTab: 'tb_polular'})}>
          <View style={styles.page1}>
            <NavigationBar
              title={'hellohellohellohellohellohellohellohello'}
              statusBar={{translucent: true}}
            />
          </View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_trending'}
          title="趋势"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('./res/images/ic_trending.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('./res/images/ic_trending.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_trending'})}>
          <View style={styles.page2}></View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_favorite'}
          title="收藏"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('./res/images/ic_favorite.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('./res/images/ic_favorite.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
          <View style={styles.page1}></View>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'tb_my'}
          title="我的"
          selectedTitleStyle={styles.titleStyle}
          renderIcon={() => <Image style={styles.tabIcon} source={require('./res/images/ic_my.png')}/>}
          renderSelectedIcon={() => <Image style={[styles.tabIcon, {tintColor: '#f00'}]} source={require('./res/images/ic_my.png')}/>}
          onPress={() => this.setState({selectedTab: 'tb_my'})}>
          <View style={styles.page2}></View>
        </TabNavigator.Item>
      </TabNavigator>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f00',
  },
  page1: {
    flex: 1,
    backgroundColor: '#f00'
  },
  page2: {
    flex: 1,
    backgroundColor: 'yellow'
  },
  tabIcon: {
    height: 22,
    width: 22
  },
  titleStyle: {
    color: 'red'
  }
})
